<!-- <template> 标签是 Vue 单文件组件的一部分，用于包含组件的 HTML 结构。 -->
<template>
    <!-- 这是组件的根元素。每个 Vue 组件的模板都必须有一个唯一的根元素。 -->
    <div id="app">
        <!-- <img> 标签用于显示图片。 -->
        <!-- alt="Vue logo" 是图片的替代文本，当图片无法加载时显示。 -->
        <!-- src="./assets/logo.png" 指定图片的路径。这是一个相对路径，
         Webpack 在构建时会处理这个路径，并将图片作为模块依赖打包。 -->
        <img alt="Vue logo" src="./assets/logo.png" />
        <!-- <HelloWorld> 是一个子组件。在这里，我们正在使用它。 -->
        <!-- msg="Welcome to Your Vue.js App" 是向 HelloWorld 组件传递一个名为 'msg' 的 prop (属性)。
         父组件通过 props 向子组件传递数据。 -->
        <HelloWorld msg="Welcome to Your Vue.js App" />
    </div>
</template>

<!-- <script> 标签用于包含组件的 JavaScript 逻辑。 -->
<script>
// 从 './components/HelloWorld.vue' 文件中导入 HelloWorld 组件。
import HelloWorld from "./components/HelloWorld.vue";

// export default 导出一个对象，这个对象是 Vue 组件的定义。
export default {
    // name: 'App' 定义了组件的名称（推荐和当前文件名保持一致）。这个名称在 Vue Devtools 中显示，也有助于递归组件的自我引用。
    name: "App",
    // components 对象用于注册当前组件想要使用的子组件。
    components: {
        // 在这里注册 HelloWorld 组件后，就可以在 <template> 中以 <HelloWorld> 的形式使用它了。
        // 这是 ES6 的对象属性简写，等同于 'HelloWorld': HelloWorld。
        HelloWorld,
    },
};
</script>

<!-- <style> 标签用于包含组件的 CSS 样式。 -->
<!-- 默认情况下，这里的样式是全局的。如果添加 'scoped' 属性（<style scoped>），
     那么样式将只作用于当前组件内的元素，不会影响到其他组件。 -->
<style>
/* 这是一个 CSS 选择器，选择了 id 为 'app' 的元素，也就是我们模板的根元素。 */
#app {
    /* 设置字体族。浏览器会依次尝试使用列表中的字体。 */
    font-family: Avenir, Helvetica, Arial, sans-serif;
    /* -webkit-font-smoothing: antialiased; 和 -moz-osx-font-smoothing: grayscale; 
     是用于改善字体在 Webkit 和 Firefox 浏览器上渲染效果的属性，使其看起来更平滑、更清晰。 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 设置文本居中对齐。 */
    text-align: center;
    /* 设置文本颜色。 */
    color: #2c3e50;
    /* 设置顶部外边距为 60 像素。 */
    margin-top: 60px;
}
</style>
